<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NTD-S</title>
    <link rel="stylesheet" href="./public/style.css">
  </head>
  <body>
    <div id="app">
        <div class="container flex justify-between align-center">
            <div class="inputBox">
                <input type="number" v-model="original.width" placeholder="x1">
                <div class="line"></div>
                <input type="number" v-model="original.height" placeholder="y1">
            </div>
            <div class="match">=</div>
            <div class="inputBox">
                <input type="number" v-model="target.width" placeholder="x2">
                <div class="line"></div>
                <input type="number" v-model="target.height" placeholder="y2">
            </div>
        </div>
        <div class="btn" @click="handleCalculation">计算比例</div>

        <div class="history">
            <div class="flex justify-between">
                <h3>历史记录<small>格式：x1:y1 = x2:y2  时间</small></h3>
                <span class="cursor" @click="clearHistory">清除记录</span>
            </div>
            <ul class="historyList" v-if="calculationResult.length">
                <li class="flex justify-between align-center" v-for="(item,index) in calculationResult" :key="index">
                    <div class="flex align-center">
                        <span>{{item.x1}}</span>
                        <em>:</em>
                        <span>{{item.y1}}</span>
                    </div>

                    <i>=</i>
                    
                    <div class="flex align-center">
                        <span>{{item.x2}}</span>
                        <em>:</em>
                        <span>{{item.y2}}</span>
                    </div>

                    <b>{{item.date}}</b>
                </li>
            </ul>
            <div class="historyList" v-else>
                <p>暂无数据</p>
            </div>
        </div>
    </div>
    <script src="./public/vue.global.js"></script>
    <script src="./public/lodash.min.js"></script>
    <script src="./public/dayjs.min.js"></script>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!',
                    original:{
                        width:'',
                        height:''
                    },
                    target:{
                        width:'',
                        height:''
                    },
                    calculationResult:[]
                }
            },
            methods:{
                handleCalculation(){
                    const that=this
                    const {width:x1,height:y1} = this.original
                    const {width:x2,height:y2} = this.target
                    this.target.height = Math.floor(y1*x2/x1 * 100) / 100

                    const pushList = () =>{
                        if(x1 && y1 && x2){
                            this.calculationResult.push({
                                x1,y1,x2,
                                y2: that.target.height,
                                date: dayjs().format('YYYY-MM-DD hh:mm:ss')
                            })
                            if(this.calculationResult.length>10){
                                this.calculationResult.shift()
                            }
                            var deep = _.cloneDeep(this.calculationResult);
                            utools.dbStorage.setItem('calculationResult',deep )
                            console.log(utools.dbStorage.getItem('calculationResult'));
                        }else{
                            console.log('没有输入值');
                        }
                    }
                    if(this.calculationResult.length){
                        const {x1:rx1,y1:ry1,x2:rx2,y2:ry2} = this.calculationResult[this.calculationResult.length-1]
                        if(x1!==rx1 || y1!==ry1 || x2!==rx2 || y2!==ry2){
                            pushList()
                        }else{
                            console.log('没有变化');
                        }
                    }else{
                        pushList()
                    }
                },
                clearHistory(){
                    utools.dbStorage.removeItem('calculationResult')
                    this.calculationResult=[]
                    console.log('清空历史记录');
                }
            },
            mounted(){
                if(utools.dbStorage.getItem('calculationResult')){
                    this.calculationResult=utools.dbStorage.getItem('calculationResult')
                }
                console.log(utools.dbStorage.getItem('calculationResult'));
                console.log(dayjs().format('YYYY-MM-DD hh:mm:ss'));
            }
        }).mount('#app')
    </script>
  </body>
</html>
